<template>
  <div class="my">
    <div class="top1">
      <div class="top">
        <div class="left">
          <img :src="userList.avatar" alt="" @click="UpdateImg" />
          <p @click="$router.push('/login')" v-if="msg">登录/注册</p>
          <p>{{ userList.nickname }}</p>
        </div>
        <button class="btn">去约课</button>
      </div>
    </div>
    <div class="center">
      <p class="kecheng">课程相关</p>
      <div class="content">
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_teacher.png" alt="" />
          <p>关注的老师</p>
        </div>
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_collect.png" alt="" />
          <p>我的收藏</p>
        </div>
      </div>
      <p class="kecheng">订单相关</p>
      <div class="content">
        <div class="teacher">
          <img src="../assets/theme-img/icon_person_order.png" alt="" />
          <p>课程订单</p>
        </div>
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_order.png" alt="" />
          <p>会员订单</p>
        </div>
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_order.png" alt="" />
          <p>约课订单</p>
        </div>
      </div>
      <p class="kecheng">我的账户</p>
      <div class="content">
        <div class="teacher">
          <img src="../assets/theme-img/icon_person_coupon.png" alt="" />
          <p>优惠券</p>
        </div>
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_card.png" alt="" />
          <p>学习卡</p>
        </div>
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_vip.png" alt="" />
          <p>会员</p>
        </div>
      </div>
      <p class="kecheng">自助服务</p>
      <div class="content">
        <div class="teacher">
          <img src="../assets/theme-img/icon_person_news.png" alt="" />
          <p>我的消息</p>
        </div>
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_mail.png" alt="" />
          <p>意见反馈</p>
        </div>
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_custom.png" alt="" />
          <p>在线客服</p>
        </div>
        <div class="teacher" @click="$router.push('/guanzhu')">
          <img src="../assets/theme-img/icon_person_setting.png" alt="" />
          <p>设置</p>
        </div>
      </div>
    </div>
    <TabberBtn></TabberBtn>
  </div>
</template>
<script>
import { Userinfo } from "../tool/login";
import TabberBtn from "@/components/tabber.vue";
export default {
  data() {
    return {
      userList: {
        avatar: require("../assets/1.jpg"),
      },
      msg: false,
      nickname: "",
    };
  },
  components: {
    TabberBtn,
  },
  methods: {
    async UpdateImg() {
      let res = await Userinfo();
      if (res.code == 200) {
        this.msg = false;
        this.userList = res.data;
      } else {
        this.msg = true;
      }
      console.log(res);
      this.$router.push("/info");
    },
  },
};
</script>
<style lang="scss" scoped>
.my {
  .top1 {
    width: 100%;
    height: 150px;
    background-color: #fc5500;
    .top {
      width: 90%;
      position: absolute;
      top: 50px;
      border-radius: 10px;
      left: 5%;
      display: flex;
      align-items: center;
      height: 150px;
      justify-content: space-between;
      padding: 20px;
      box-sizing: border-box;
      background-color: white;
      .left {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          vertical-align: middle;
        }
        p {
          margin-left: 80px;
          font-size: 30px;
          color: #fc5500;
        }
      }

      .btn {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: white;
        background-color: #eb6100;
        border: none;
        border-radius: 10px;
      }
    }
  }
  .center {
    height: 170px;
    padding: 0px 0 0 30px;
    margin-top: 100px;
    .kecheng {
      font-size: 25px;
      margin: 20px 0 0 15px;
      // margin-left: 20px;
    }
    .content {
      height: 130px;
      display: flex;
      border-bottom: 1px solid rgba(128, 128, 128, 0.404);
    }
    .teacher {
      margin-top: 20px;
      img {
        width: 50px;
        height: 50px;
      }
      width: 200px;
      text-align: center;
      font-size: 22px;
    }
  }
}
</style>